<template>
  <div class="layout-container">
    <div class="layout-container-table">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <!-- <el-tab-pane label="用户资料" name="1">
          <my-form></my-form>
        </el-tab-pane> -->
        <el-tab-pane label="修改密码" name="2">
          <password-form></password-form>
        </el-tab-pane>
        <el-tab-pane label="登录日志" name="3">
          <my-table></my-table>
        </el-tab-pane>
        <el-tab-pane label="操作日志" name="4">
          <!-- <my-table></my-table> -->
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import type {TabsPaneContext} from 'element-plus'
import myForm from "./my-form.vue"
import passwordForm from "./password-form.vue"
import myTable from "./my-table.vue"

const activeName = ref('2')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

</script>

<style lang="scss" scoped>
.layout-container {
  width: calc(100% - 10px);
  height: 100%;
  margin: 0 0 0 10px;
}
</style>